<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  import {toggleTheme, defaultStyle} from '@/style/themes.js';

  export default {
    name: 'App',
    data() {
      return {};
    },
    created() {
      this.setThemes();
    },
    mounted() {
      this.setWindowInfo();
    },
    methods: {
      // 保存窗口信息：尺寸，设备类型（pc、mobile）
      setWindowInfo() {
        let clientWidth = document.body.clientWidth;
        let clientHeight = document.body.clientHeight;
        let winType = clientWidth <= 750 ? 'mobile' : 'pc';
        this.$store.commit('windowInfo', {clientWidth, clientHeight, winType});
      },
      // 设置主题
      setThemes(themes = defaultStyle) {
        this.$store.commit('themes', themes);
      }
    },
    watch: {
      // 监听主题变化，调用更新主题方法
      '$store.getters.themes'(newVal, oldVal) {
        toggleTheme(newVal);
      }
    },
    components: {}
  }
</script>

<style>

</style>
